<template>
  <div class="vue-function clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">深copy</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            JSON.parse(JSON.stringify(data))
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">this.$set</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 修改json的值，触发视图层更新
            this.$set(json,key,value);
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">this.$nextTick</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 在下次 DOM 更新循环结束之后执行延迟回调
            this.$nextTick(function() {

            });
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">this.$emit</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 子组件传参(fun只能是全小写字母)
            this.$emit(fun,val);
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">组件取值</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            this.$refs.data   // 取子组件的值<br>
            this.$parent.data   // 取父组件的值
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">重新渲染组件</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            this.$forceUpdate()
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">深度监听</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            watch: {<br>
              &nbsp;&nbsp;'name': {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;handler: function (nv) {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;},<br>
                &nbsp;&nbsp;&nbsp;&nbsp;deep: true<br>
              &nbsp;&nbsp;}<br>
            }
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueFunction'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-function{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
